<template>
    <div class="portfolio">
        <div class="header">
            <div class="title">Portfolio</div>
            <div class="more">
                <div class="key">Total Value</div>
                <div class="value">$8,476.58</div>
                <div class="mover">+1.18% ($+98.85)</div>
            </div>
        </div>
        <div class="content" v-if="false">
            <div class="sub-title">Performance (7 Days)</div>
            <div class="charts"></div>
        </div>
    </div>
</template>

<script setup></script>

<style scoped lang="less">
.portfolio {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1vw;

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title {
            font-size: 1.8vw;
            font-weight: 600;
            color: var(--text-color);
        }

        .more {
            display: flex;
            flex-direction: column;
            align-items: flex-end;

            .key {
                font-size: 0.7vw;
                color: var(--text-light-color);
            }

            .value {
                font-size: 1.5vw;
                font-weight: 600;
                color: var(--text-color);
            }

            .mover {
                font-size: 0.85vw;
                color: var(--positive-number-color);
            }
        }
    }

    .content {
        box-sizing: border-box;
        width: 100%;
        padding: 1.5vw;
        display: flex;
        flex-direction: column;
        gap: 1vw;
        background-color: #fff;
        box-shadow: 0 0 0.5vw rgba(0, 0, 0, 0.05);
        border-radius: 0.5vw;

        .sub-title {
            font-size: 1.1vw;
            font-weight: 600;
            color: var(--text-color);
        }

        .charts {
            width: 100%;
            height: 20vw;
            background-color: #fafafa;
        }
    }
}
</style>